<template>
  <div id="Tag01">
    请配置信息：
    <ip-adress-input ref="ip" v-model="filter.ip"></ip-adress-input>
    <el-input placeholder="端口号" type="text" class="port" v-model="filter.port"></el-input>
    <el-input placeholder="路径默认:/" type="text" class="load" v-model="filter.load"></el-input>
    <el-button class="SettingIp" @click="SettingIp">设置</el-button>
    <el-input v-model="filter.ip"></el-input>
    <el-button @click="getdata">获得数据</el-button>
    <el-input type="textarea" v-model="this.msg"></el-input>
    <el-input type="textarea" v-model="this.info"></el-input>
    <label>{{this.info}}</label>
  </div>
</template>

<script>

  import Tag02 from "./Tag02";
  import IpAdressInput from "./input/IpAdressInput";

  export default {
    name: "Tag01",
    components: {IpAdressInput, Tag02},
    data() {
      return {
        info: "",
        msg: "",
        i: 0,
        filter: {
          name: "",
          port: "",
          load: "/" + "",
          ip: "",
        }
      }
    },
    methods: {

      SettingIp() {
        let ip = this.filter.ip;
        let ipadree;
        if (ip == null || ip == "" || this.filter.port == null || this.filter.port == "") {
          confirm("请输入IP地址和端口号");
          window.location.reload();
        } else {
          let s1 = parseInt(ip.substring(0, 3));
          let s2 = parseInt(ip.substring(3, 6));
          let s3 = parseInt(ip.substring(6, 9));
          let s4 = parseInt(ip.substring(9, 12));
          ipadree = s1 + "." + s2 + "." + s3 + "." + s4 + "";

          // 将IP地址、端口号、路径写入缓存
          sessionStorage.setItem("ipadree", ipadree);
          sessionStorage.setItem("port", this.filter.port);
          sessionStorage.setItem("load", this.filter.load);
          // 提示框
          const h = this.$createElement;
          this.$notify({
            title: '系统配置',
            message: h('span', {style: 'color: #57FF1A'}, '设置成功')
          });
        }
      },
      getdata() {
        let ipadree = sessionStorage.getItem("ipadree");
        let port = sessionStorage.getItem("port");
        if (ipadree != null && port != null) {
          const url = "http://" + ipadree + ":" + port + sessionStorage.getItem("load");
          console.log(url)
          this.$axios.get(url).then(res =>{
            this.msg = res;
            console.log(res.data.result);
          })
        } else {
          confirm("请输入IP地址和端口号");
        }
      },
    },
    computed: {}
  }
</script>

<style scoped>
  /*.date_textarea{*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*}*/
  .SettingIp {
    margin-left: 460px;
    float: left;
    margin-top: -55px;

  }

  .port, .load {
    float: left;
    width: 75px;
    margin-top: -55px;
    margin-left: 230px;
  }

  .load {
    margin-left: 324px;
    width: 120px;
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>
